<template>
	<Layout class="layout-container">
		<Content>
			<Spin fix v-if="loading"></Spin>
			<Form ref="form" :model="value" :rules="rules" label-position="left" :label-width="120">
				<Layout class="layout-container">
					<Content class="padding-all">
						<% for(field in fields) { %>
			            <FormItem :label="label.#{field.name}" prop="#{field.name}">
			            	<% if(field.type.typeName == 'Boolean' || field.type.typeName == 'boolean') { %>
			                <iSwitch 
			                	v-model="value.#{field.name}" size="large" 
			                	:true-value="true" 
			                	:false-value="false">
			                	<span slot="open">{{$t('info.yes')}}</span>
			        			<span slot="close">{{$t('info.no')}}</span>
			                </iSwitch>
			            	<% } else if(field.type.typeName == 'Long' || field.type.typeName == 'long' || field.type.typeName == 'Integer' || field.type.typeName == 'int') { %>
			            	<InputNumber
			                	v-model="value.#{field.name}" 
			                	:min="0"
				        		:placeholder="placeholder.#{field.name}"
				        		style="width:100%;" />
			            	<% } else { %>
			                <Input type="text" v-model="value.#{field.name}" :placeholder="placeholder.#{field.name}" />
			                <% } %>
			            </FormItem>
			            <% } %>
					</Content>
					<div class="padding-all">
		    			<span class="pull-right">
						<Button @click="reset">{{$t('info.reset')}}</Button>
						<Button 
							type="primary" 
							html-type="submit" 
							@click.prevent="submit">{{$t('info.submit')}}</Button>
						</span>
					</div>
				</Layout>
			</Form>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Spin, Form, FormItem, Button, Input, Switch, InputNumber } from 'view-design';
import { add } from './api';

export default {
	name: "#{upermodule}#{upername}Add",
	data() {
		const label = {
			<% for(field in fields) { %>
			#{field.name}: this.$t("#{module}.#{lowername}.#{field.name}"),
			<% } %>
		};
		return {
			loading: false,
			label,
			placeholder: {
				<% for(field in fields) { %>
				#{field.name}: this.$t("info.placeholder", [label.#{field.name}]),
				<% } %>
			},
			value: {
				<% for(field in fields) { %>
				#{field.name}: #{field.type.typeName == "Boolean" || field.type.typeName == "boolean" ? "true" : (field.type.typeName == "Integer" || field.type.typeName == "Long" || field.type.typeName == 'int' || field.type.typeName == 'long') ? "0" : "''"},
				<% } %>
			},
			rules: {
				<% for(field in fields) { %>
				#{field.name}: {
					label: label.#{field.name},
					required: true,
					trigger: "blur"
				},
				<% } %>
			}
		};
	},
	methods: {

		submit() {
			this.$refs.form.validate((valid) => {
				if(valid) {
					this.loading = true;
					add(this.value, (res) => {
						if(res.success) {
							//回调
							this.$emit('callback');
							//关闭窗口
							this.$emit('close');
						} 
						this.loading = false;
					});
				}
			});
			return false;
		},
        reset() {
            this.$refs.form.resetFields();
        }
	},
	components: {
		Layout,
		Content,
		Spin,
		Form,
		FormItem,
		Button,
		Input,
		iSwitch: Switch,
		InputNumber
	}
}
</script>